<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工作管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="5">
          <el-input placeholder="请输入单号" v-model="queryInfo.orderId" clearable @clear="getOrders">
            <el-button slot="append" icon="el-icon-search" @click="getOrders"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4" style="padding-left:20px">
          <el-select v-model="queryInfo.community" placeholder="全部" @change="getOrders">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            <el-option label="全部" value=''></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.orderProgress" placeholder="全部" @change="getOrders">
            <el-option label="已申请" value=0></el-option>
            <el-option label="处理中" value=1></el-option>
            <el-option label="已完成" value=2></el-option>
            <el-option label="已取消" value=3></el-option>
            <el-option label="待评价" value=4></el-option>
            <el-option label="已评价" value=5></el-option>
            <el-option label="全部" value=''></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryInfo.orderType" placeholder="全部" @change="getOrders">
            <el-option label="政务服务" value=0></el-option>
            <el-option label="社区服务" value=1></el-option>
            <el-option label="其他" value=2></el-option>
            <el-option label="全部" value=''></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="padding-left:20px">
          <el-date-picker v-model="queryInfo.queryTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" @change="getOrders">
          </el-date-picker>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="orderList" border>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="服务单号" prop="orderId"></el-table-column>
        <el-table-column label="服务类型" prop="orderType">
          <template slot-scope="{row}">
            <el-tag type="primary" v-if="row.orderType==0">政务服务</el-tag>
            <el-tag type="warning" v-else-if="row.orderType==1">社区服务</el-tag>
            <el-tag type="success" v-else-if="row.orderType==2">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务描述" prop="orderDes"></el-table-column>
        <el-table-column label="服务进度">
          <template slot-scope="{row}">
            <el-tag type="primary" v-if="row.orderProgress==0">已申请</el-tag>
            <el-tag type="warning" v-else-if="row.orderProgress==1">处理中</el-tag>
            <el-tag type="success" v-else-if="row.orderProgress==2">已完成</el-tag>
            <el-tag type="danger" v-else-if="row.orderProgress==3">已取消</el-tag>
            <el-tag type="info" v-else-if="row.orderProgress==4">待评价</el-tag>
            <el-tag type="info" v-else-if="row.orderProgress==5">已评价</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="申请用户Id">
          <template slot-scope="{row}">
            <el-link @click="showResidentInfoDialog(row.residentId)">{{row.residentId}}<i class="el-icon-view el-icon--right"></i> </el-link>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="{row}">
            <span>{{row.createTime | dataFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="{row}">
            <span>{{row.updateTime | dataFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="233px">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
              <el-button type="info" icon="el-icon-info" size="mini" @click="showDetail(row.orderId)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="处理" placement="top">
              <el-button type="primary" :disabled="row.orderProgress!==0" icon="el-icon-circle-plus" size="mini" @click="handleOrder(row.orderId)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="取消" placement="top">
              <el-button type="warning" :disabled="row.orderProgress!==0 && row.orderProgress!==1 " icon="el-icon-delete" size="mini" @click="cancelOrder(row.orderId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align:center" background>
      </el-pagination>
    </el-card>

    <!-- 展示申请人员信息 -->
    <el-dialog title="申请用户信息" :visible.sync="ResidentInfoDialog" width="50%">
      <el-form :model="ResidentInfo" label-width="100px">
        <el-form-item label="姓名:">
          <el-input v-model="ResidentInfo.residentName" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="ResidentInfo.residentPhone" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码:">
          <el-input v-model="ResidentInfo.residentCard" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="健康状态:">
          <el-tag type="success" v-if="ResidentInfo.lsolate==0">健康/未注射疫苗</el-tag>
          <el-tag type="success" v-else-if="ResidentInfo.lsolate==1">健康/已打第一针</el-tag>
          <el-tag type="success" v-else-if="ResidentInfo.lsolate==2">健康/已打第二针</el-tag>
          <el-tag type="success" v-else-if="ResidentInfo.lsolate==3">健康/已打第三针</el-tag>
          <el-tag type="danger" v-else-if="ResidentInfo.lsolate==4">疑似疫情</el-tag>
          <el-tag type="danger" v-else-if="ResidentInfo.lsolate==5">确诊</el-tag>
          <!-- <el-input v-model="ResidentInfo.lsolate" disabled style="width:80%"></el-input> -->
        </el-form-item>
        <el-form-item label="所在社区:">
          <el-input v-model="ResidentInfo.community" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input v-model="ResidentInfo.residentAddress" disabled style="width:80%"></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 服务单信息 -->
    <el-dialog title="服务单信息" :visible.sync="detailDialog" width="50%">
      <el-form :model="detailInfo" label-width="100px" disabled>
        <el-form-item label="服务类型:">
          <template :slot-scope="detailInfo.orderType">
            <el-tag type="primary" v-if="detailInfo.orderType==0">政务服务</el-tag>
            <el-tag type="warning" v-else-if="detailInfo.orderType==1">社区服务</el-tag>
            <el-tag type="success" v-else-if="detailInfo.orderType==2">其他</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="服务进度:">
          <template :slot-scope="detailInfo.orderProgress">
            <el-tag type="primary" v-if="detailInfo.orderProgress==0">已申请</el-tag>
            <el-tag type="warning" v-else-if="detailInfo.orderProgress==1">处理中</el-tag>
            <el-tag type="success" v-else-if="detailInfo.orderProgress==2">已完成</el-tag>
            <el-tag type="danger" v-else-if="detailInfo.orderProgress==3">已取消</el-tag>
            <el-tag type="info" v-else-if="detailInfo.orderProgress==4">待评价</el-tag>
            <el-tag type="info" v-else-if="detailInfo.orderProgress==5">已评价</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="服务内容:">
          <el-input v-model="detailInfo.orderDes" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="申请服务社区:">
          <el-input v-model="detailInfo.community" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="申请人员姓名:">
          <el-input v-model="detailInfo.residentName" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="申请人员电话:">
          <el-input v-model="detailInfo.residentPhone" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="服务工作人员:">
          <el-input v-model="detailInfo.workName" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="职位:">
          <el-input v-model="detailInfo.jobs" disabled style="width:80%"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cityData from '../../assets/js/cityData.js'
export default {
  data () {
    return {
      queryInfo: {
        orderId: '',
        pageNum: 1,
        pageSize: 5,
        community: '',
        orderProgress: '',
        orderType: '',
        queryTime: ''
      },
      orderList: [],
      detailInfo: [],
      detailDialog: false,
      total: 0,
      cityData,
      ResidentInfo: {},
      ResidentInfoDialog: false
    }
  },
  created () {
    this.getOrders()
  },
  methods: {
    // 获取服务
    async getOrders () {
      if (this.queryInfo.queryTime === null) this.queryInfo.queryTime = ''
      const { data: res } = await this.$http.get('order/getOrders', { params: this.queryInfo })
      this.orderList = res.data.records
      this.total = res.data.total
    },
    // 取消服务
    async cancelOrder (id) {
      const { data: res } = await this.$http.put(`order/cancelOrderById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('取消失败')
      }
      this.$message.success('取消成功')
      this.getOrders()
    },
    // 分页器
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrders()
    },
    handleCurrentChange (newSize) {
      this.queryInfo.pageNum = newSize
      this.getOrders()
    },
    // 展示用户信息
    async showResidentInfoDialog (id) {
      if (id !== null && id !== '') {
        const { data: res } = await this.$http.get(`resident/getResidentById/${id}`)
        this.ResidentInfo = res.data
        console.log(this.ResidentInfo)
        this.ResidentInfoDialog = true
      } else return this.$message.error('暂时没人员接单')
    },
    // 展示详情
    async showDetail (id) {
      const { data: res } = await this.$http.get(`order/getOrderById/${id}`)
      this.detailInfo = res.data
      console.log(this.detailInfo)
      if (this.detailInfo.workId !== '' && this.detailInfo.workId !== null) {
        const { data: work } = await this.$http.get(`work/getWorkerById/${this.detailInfo.workId}`)
        Object.assign(this.detailInfo, work.data)
      }
      const { data: resident } = await this.$http.get(`resident/getResidentById/${this.detailInfo.residentId}`)
      if (resident.meta.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      Object.assign(this.detailInfo, resident.data)
      console.log(this.detailInfo)
      this.detailDialog = true
    },
    async handleOrder (id) {
      const { data: res } = await this.$http.put(`order/handleOrderById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('处理失败')
      }
      this.$message.success('收取任务成功')
      this.getOrders()
    }
  }
}
</script>

<style lang='less' scoped>
</style>
